<style lang="less">
	page {
		background: #f6f6f6;
	}

	.container {
		padding: 0 30upx 30upx;
	}

	.notAvailable {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		image {
			width: 243upx;
			height: 243upx;
		}

		view {
			margin-top: 30upx;
			font-size: 26upx;
			font-weight: bold;
			color: #999999;
		}
	}

	.today {
		width: 100%;

		.today_title {
			font-size: 30upx;
			font-weight: 500;
			color: #333333;
			margin-top: 30upx;
		}

		.today_main {
			margin-top: 30upx;
			width: 100%;
			padding: 30upx;
			border-radius: 12upx;
			box-sizing: border-box;
			background-color: #ffffff;

			.navigate_main {
				width: 100%;
				display: flex;

				.main_fl {
					position: relative;
					width: 216upx;
					height: 216upx;
					margin-right: 20upx;

					image {
						width: 100%;
						height: 100%;
					}

					.main_fl_zhao {
						position: absolute;
						left: 0;
						top: 0;
						right: 0;
						bottom: 0;
						background: #000000;
						opacity: 0.4;
						border-radius: 4upx;
						z-index: 1;
					}

					.main_fl_txt {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						z-index: 2;
						font-size: 38upx;
						font-weight: 500;
						color: #ffffff;
					}
				}

				.main_fr {
					width: calc(100% - 216upx - 20upx);

					.main_fr_title {
						font-size: 24upx;
						font-weight: bold;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						word-break: break-all;
					}

					.main_fr_txt {
						margin: 6upx 0;
						font-size: 24upx;
						font-weight: 500;
						color: #666666;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						word-break: break-all;
					}

					.main_fr_activity {
						width: 100%;
						white-space: nowrap;

						.activity {
							display: inline-block;
							margin-right: 10upx;
							padding: 6upx 12upx;
							background: #DBC291;
							border-radius: 20upx;

							font-size: 20upx;
							font-weight: 500;
							color: #FFFFFF;
						}
					}

					.hotgood_bs {
						margin-top: 5upx;
						.hotgood_bs_main {
							display: flex;
							white-space: nowrap;
							align-items: center;
						}

						.bs_name {
							display: inline-block;
							margin-right: 10upx;

							.bs_name_top {
								display: flex;
								align-items: center;
							}

							.bs_name_img {
								width: 30upx;
								height: auto;
							}

							.bs_name_name {
								line-height: 32upx;
								background: rgba(219, 194, 145, 1);
								border-radius: 32upx;
								padding: 0 8upx;
								font-size: 20upx;
								font-weight: 500;
								color: rgba(255, 255, 255, 1);
							}
						}
					}

					.main_fr_price {
						display: flex;
						align-items: center;
						margin: 6upx 0;

						.activity_price {
							font-size: 32upx;
							font-family: 'DINCond';
							font-weight: 400;
							color: #E93246;
							margin-right: 20upx;
						}

						.activity_gray_price {
							font-size: 24upx;
							font-family: 'DINCond';
							font-weight: 400;
							text-decoration: line-through;
							color: #BBBBBB;
						}
					}

					.main_fr_shui {
						display: flex;
						align-items: center;

						.you {
							display: flex;
							margin-right: 10upx;

							view {
								&:first-of-type {
									font-size: 20upx;
									font-weight: 400;
									color: #DBC291;
								}

								&:last-of-type {
									font-size: 22upx;
									font-family: 'DINCond';
									font-weight: 500;
									color: #DBC291;
								}
							}
						}

						.you.tes {
							display: flex;
							margin-right: 10upx;

							view {
								&:first-of-type {
									font-size: 20upx;
									font-weight: 400;
									color: #E93246;
								}

								&:last-of-type {
									font-size: 22upx;
									font-family: 'DINCond';
									font-weight: 500;
									color: #E93246;
								}
							}
						}

						.shui {
							font-size: 22upx;
							font-family: 'DINCond';
							font-weight: 500;
							color: #DBC291;
						}
					}
				}
			}
		}
	}

	.del {
		position: fixed;
		top: 30upx;
		right: 0upx;
		height: calc(100% - 30upx);
		width: 110upx;
		z-index: 1000;

		movable-area {
			width: 100%;
			height: 100%;

			pointer-events: none;

			movable-view {
				pointer-events: auto;
				width: 110upx;
				height: 50upx;

				.guize {
					line-height: 50upx;
					background: #ffffff;
					color: #ffffff;
					width: 110upx;
					text-align: center;
					font-size: 28upx;
					border-radius: 30upx 0 0 30upx;
					overflow: hidden;

					view {
						opacity: 0.2;
						background: #000000;
					}
				}
			}
		}
	}
	//打开app
	.posApp{
	  position: fixed;
	  bottom: 160upx;
	  left: 0;
	  width: 100%;
	  display: flex;
	  justify-content: center;
	  // width: 200upx;
	  #launch-btn{
				   width: 100%;
	  }
	  .btn1{
	      transform: translate(-50%, 0);
	      background: #000000 url('https://static.xpandago.net/wechat/images/xiongmao_logo%402x.png') 30upx center no-repeat;
	      font-size:26upx;
	      color:rgba(255,255,255,1);
	      line-height:41px;
	      background-size: 40upx;
	      padding: 0 30upx 0 90upx;
	  	   line-height: 74upx;
	      border-radius: 37upx;
	  	}
	}
</style>

<script module="indexofStr" lang="wxs">
	module.exports.includes = function (str1, str2) {
    		return str1.indexOf(str2)
    	}
</script>
<template>
	<view class="container">
		<view class="notAvailable" v-if="totalPage == 0 || totalPage == null">
			<image src="https://static.xpandago.net/wechat/images/notAvailable.png" class="" mode="widthFix"></image>
			<view>还没有浏览商品的记录</view>
		</view>
		<view class="today" v-if="viewLogList != null && viewLogList != '' && item.goods != '' && item.goods != null"
			v-for="(item,index) in viewLogList" :key="index">
			<view class="today_title">{{item.date}}</view>
			<view class="today_main" v-for="(newitem,i) in item.goods" :key="i" @click="goodsTap(newitem)">
				<view class="navigate_main">
					<view class="main_fl">
						<image :src="http + newitem.img" mode="widthFix"></image>
					</view>
					<view class="main_fr">
						<view class="main_fr_title">{{newitem.sellPoint}}</view>
						<view class="main_fr_txt">{{newitem.name}}</view>
						<scroll-view scroll-x="true" class="hotgood_bs">
							<view class="hotgood_bs_main">
								<view class="bs_name" v-for="(labelitem,ind) in newitem.labelList" :key="ind">
									<view class="bs_name_top" v-if="indexofStr.includes(labelitem,'http')>-1">
										<image :src="labelitem" lazy-load="true" class="bs_name_img" mode="widthFix"></image>
									</view>
									<view v-else class="bs_name_name">{{labelitem}}</view>
								</view>
							</view>
						</scroll-view>
						<view class="main_fr_price">
							<view class="activity_price">¥ {{newitem.sellPrice}}</view>
							<view class="activity_gray_price">¥ {{newitem.marketPrice}}</view>
						</view>
						<view class="main_fr_shui">
							<view class="you"
								v-if="newitem.vipPrice != '' && newitem.vipPrice != null && newitem.isNewWeek==false">
								<view>优享价:</view>
								<view>¥ {{newitem.vipPrice}}</view>
							</view>
							<view class="you tes"
								v-if="newitem.vipPrice != '' && newitem.vipPrice != null && newitem.isNewWeek==true">
								<view>新人价:</view>
								<view>¥ {{newitem.vipPrice}}</view>
							</view>
							<view class="shui" v-if="newitem.appCost != '' && newitem.appCost != null">(含税¥
								{{newitem.appCost}}）
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
		<!-- <view class="del" :style="{display: viewLogList != null && viewLogList != '' ? 'block' : 'none'}">
			<movable-area>
				<movable-view direction="all" x="300" y="200" out-of-bounds="true" damping="10">
					<view class="guize" @tap.stop="empty">
						<view>清空</view>
					</view>
				</movable-view>
			</movable-area>
		</view> -->
		<!-- 打开app -->
		<view class="posApp">
			<wx-open-launch-app
			 id="launch-btn"
					 @error="handleErrorFn" @launch="handleLaunchFn"
			 appid="wx6cd109015aa3f35b"
			 :extinfo="extinfo"
			>
			<script type="text/wxtag-template">
				<style>.btn {color: #FFFFFF; margin: 0 auto;line-height: 37px; display: block;background: #000000 url('https://static.xpandago.net/wechat/images/xiongmao_logo%402x.png') 15px center no-repeat; background-size:20px;border: none; border-radius: 18px;padding: 0 15px 0 45px}</style>
				<button id="btn1" class="btn">打开App</button>
				</script>
			</wx-open-launch-app>
		</view>
	</view>

</template>
<script>
	import api from '@/common/api';
	import wx from '@/common/wx-jdk'
	import webView from '@/common/webView'
	export default {

		components: {},

		data() {

			return {
				otherUserId:'',
				viewLogList: [],
				token: '',
				page: 1, //当前页数
				totalPage: 0, //总页数
				showLoadMore: false, //加载
				loadMoreText:'加载中...',
				productId:'',
				goodsId:'',
				extinfo:{},
				goodsTypeGoods:'',
				// streamAd: null, //开屏广告
				http: api.httpImg, //图片前缀goods_middle face-middle
			}
		},
		onLoad(options) {
			// this.token='eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiLmtYvor5XpnLgiLCJhdWRpZW5jZSI6ImUxMGFkYzM5NDliYTU5YWJiZTU2ZTA1N2YyMGY4ODNlIiwidXNlcl9pZCI6NzA0NjQsImNyZWF0ZWQiOjE2Mzc2NTQwNTU1MDIsImV4cCI6MTY0MDI0NjA1NSwidXNlcl9ncm91cF9pZCI6bnVsbCwicGxhdGZvcm0iOm51bGx9.EpnGe5cM1IHYmUPC42LokChsE3AWwczUV6LFlADwLHrPGfpXAJYRRVMyTn0KvaF8Mwd-S8b6j8LlsRKRcEw56g'
			// uni.setStorageSync('token', this.token);
			let otherUserId=this.GetQueryString('userId');
			if(otherUserId!=null && otherUserId !='' && otherUserId != undefined){
				this.otherUserId=otherUserId
			}
			if(Boolean(options.otherUserId) != false){
				this.otherUserId = options.otherUserId
			}
			var userStr = navigator.userAgent;
			var isWeixin = userStr.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
			let that=this
			// 微信内
			if(isWeixin) {
				that.token=uni.getStorageSync('token')
				that.viewLogOther()
				return false
			}else{
				if (userStr.indexOf('Android') !== -1) {
				  that.token = window.Android.getUserToken();
				  let token=that.token
				  uni.setStorageSync('token', token);
				  that.viewLogOther()
				} else {
				  webView.callhandler('getUserToken', {}, (data) => {
					uni.setStorageSync('token', data);
				    that.token = data;
					that.viewLogOther()
				  })
				}
			}
		},
		methods: {
			//截取id
			GetQueryString(name){
			    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
			    var r = window.location.search.substr(1).match(reg);
			    if(r!=null)return  unescape(r[2]); return null;
			},
			// 监听error 函数
			    handleErrorFn (e) {
			      // 跳转失败
			      console.log(JSON.stringify(e), '跳转失败')
			      // download() // 这里跳转App下载页面
				  window.location.href ="https://sj.qq.com/myapp/detail.htm?apkName=com.aole.aumall";
			    },
			    // 监听launch 函数
			    handleLaunchFn (e) {
			      // 跳转成功
			      console.log(JSON.stringify(e), '跳转成功')
			    },
				//获取随机时间jdk
			async getSignature(){
				let url=window.location.href.split('#')[0]
				const [err, res] = await api.getSignature({
						query: {
							url:url
						}
					 });
				 if(res.data.code == 0){
					 let datad=res.data.data
					 let params={type:'goodsList',content:this.productId,goodsId:this.goodsId,productId:this.productId,activityId:'-1',goodsType:this.goodsTypeGoods};
					 this.extinfo = JSON.stringify(params);
					 wx.config({
					 　　　　debug: false,
					 　　　　appId: 'wxd242cbb43e8c6351', 
					 　　　　timestamp: datad.timestamp, 
					 　　　　nonceStr: datad.nonceStr, 
					 　　　　signature: datad.signature,
							jsApiList: ['wx-open-launch-app'],
					 	   openTagList: ['wx-open-launch-app'] 
					 　　});
					 wx.ready(function (res) {
					 	console.log('ss',res)
					 });
					 wx.error(function (res) {
					  console.log('sss',res)
					 });
				 }
			},
			goodsTap(newitem){
				let paramsInfo=JSON.parse(JSON.stringify(newitem))
				this.productId=paramsInfo.productId
				this.goodsId=paramsInfo.id
				this.goodsTypeGoods=paramsInfo.goodsType
				var u = navigator.userAgent;
				var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
				var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				let that=this
				// 微信内
				if(isWeixin) {
					that.getSignature()
					return false
				}else{
					uni.showModal({
					   title: '打开APP',
					   content:'是否立即打开《熊猫出没》APP并进入该商品？',
					   // showCancel:true,//是否显示取消按钮
					   cancelColor:"#CCCCCC",
					  success: function(res) {
					    if (res.confirm) {
					      //确定按钮
					      // console.log(id)
						  that.openGoods()
					    } else if (res.cancel) {
					    }
					  }
					})
				}
				
			},
			// //返回app
			openGoods() {
			    const ua = window.navigator.userAgent.toLowerCase();
				var u = navigator.userAgent;
				var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
				var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				
				 let params={type:'goodsList',content:this.productId,goodsId:this.goodsId,productId:this.productId,activityId:'-1',goodsType:this.goodsTypeGoods};
				 let model = JSON.stringify(params);
				// const result = h5Copy(model) // 复制内容，必须字符串，数字需要转换为字符串
				// 	if (result === false) {
				// 	  uni.showToast({
				// 		title:'不支持',
				// 	  })
				// 	}
					// 微信内
					if(isWeixin) {
						if (isIOS) {
							// ios link 地址
							window.location.href = 'https://www.aolemalls.com/ALKXpandaGo/?'+encodeURIComponent(model);
						}else{
							alert('请点击右上角在浏览器中打开!')
						}
					} else {
						//android端
						if (isAndroid) {
							//安卓app的scheme协议
							window.location.href = 'xpandago://com.aole.aumall/openwith?'+encodeURIComponent(model);
							setTimeout(function(){
								let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden 
								if(typeof hidden =="undefined" || hidden ==false){
									//应用宝下载地址 
									window.location.href ="https://sj.qq.com/myapp/detail.htm?apkName=com.aole.aumall";
								}
							}, 2000);
						}
						//ios端
						if (isIOS) {
							 // ios link 地址
							 window.location.href = 'https://www.aolemalls.com/ALKXpandaGo/?'+encodeURIComponent(model);
							// setTimeout(function(){
							// 	let hidden = window.document.visibilityChange  || window.document.visibilityChange  || window.document.visibilityChange  ||window.document.visibilityChange  
							// 	alert(hidden)
							// 	if(typeof hidden =="undefined" || hidden ==false){
							// 		//App store下载地址
							// 		window.location.href = "https://itunes.apple.com/cn/app/id1458072604?mt=8";
							// 	}
							// }, 2000);
						}
					}
			    },
			// empty() {
			// 	let that = this
			// 	uni.showModal({
			// 		content: '确定要清空全部浏览记录？',
			// 		success(res) {
			// 			if (res.confirm) {
			// 				console.log('用户点击确定')
			// 				that.clearViewLog()
			// 			} else if (res.cancel) {
			// 				console.log('用户点击取消')
			// 			}
			// 		}
			// 	})
			// },
			async viewLogOther() {
				const [err, res] = await api.viewLogOther({
					query: {
						otherUserId: this.otherUserId,
						page: this.page
					},
					header: {
						'token': this.token,
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: 'POST'
				});
				if (res.data.code == 0) {
					this.showLoadMore = false
					if (res.data.data.list != null && res.data.data.list != '') {
						let list = res.data.data.list
						let time = new Date()
						let year = time.getFullYear();
						let month = time.getMonth() + 1;
						month = month < 10 ? ('0' + month) : month
						let day = time.getDate();
						day = day < 10 ? ('0' + day) : day
						let today = `${year}-${month}-${day}`
						list.forEach(v => {
							if (v.date == today) {
								v.date = '今天'
							}
						})

						if (this.viewLogList == '' && this.viewLogList.length == 0) {
							this.viewLogList = res.data.data.list
						} else {
							let arr = this.viewLogList
							if (arr[arr.length - 1].date == list[0].date) {
								arr[arr.length - 1].goods = [...arr[arr.length - 1].goods, ...list[0].goods]
								arr = [...arr, ...list.slice(1)]
							} else {
								arr = [...arr, ...list]
							}
							this.viewLogList = arr
						}

						if (res.data.data.totalPage) {
							this.totalPage = res.data.data.totalPage
						}
						// if (res.data.streamAd != '' && res.data.streamAd != null) {
						// 	this.streamAd = res.data.streamAd
						// }
					} else {
						this.viewLogList = []
					}
				}
			},
			
		},
		//下拉刷新
		 onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			this.page = 1
			this.viewLogList = []
			this.viewLogOther()
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
		onReachBottom() {
			console.log(this.page)
			this.showLoadMore = true;
			if (this.totalPage > this.page) {
				setTimeout(() => {
					this.page++
					this.viewLogOther();
				}, 300);
			}else{
				this.loadMoreText = "没有更多数据了!"
			}
		},
	}
</script>
